<template>
  <div class="q-px-sm">
    <q-resize-observer :debounce="300" @resize="resize" />

    <div class="row q-gutter-y-md">
      <div class="col-sm-6 col-xs-12 q-px-sm">
        <q-card flat class="no-border-radius">
          <q-card-section class="bg-white">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="highlight"
            ></q-avatar>
            <span> 访问人数维度 </span>
          </q-card-section>
          <q-separator />
          <div class="q-mt-sm">
            <ebar
              :height="viewData.height"
              :option="viewData.option"
              ref="visitBar"
            />
          </div>
        </q-card>
      </div>
      <div class="col-sm-6 col-xs-12 q-px-sm">
        <q-card flat class="no-border-radius">
          <q-card-section class="bg-white">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="highlight"
            ></q-avatar>
            <span> 打开次数维度 </span>
          </q-card-section>
          <q-separator />
          <div class="q-mt-sm">
            <ebar
              :height="timesData.height"
              :option="timesData.option"
              ref="timesBar"
            />
          </div>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script>
import ScShadow from 'components/shadow/ScShadow'
import commonUtil from 'src/utils/commonUtil'
import MONITOR_DATA from '@/mock/data/dashboard/monitorData'
import moment from 'moment'
import ebar from 'components/echarts/Ebar'
import { getLoginData } from '@/utils/localStorage'
import { wx_getVisitPageApi } from '@/api/analysisApi'

export default {
  name: 'statisticalOverview',
  components: { ebar },
  data() {
    return {
      monitorData: MONITOR_DATA,
      rating: 4.5,
      stepData: [20, 40, 80],
      userInfo: {},
      type: '日',
      startDate: '',
      beginDate: '',
      endDate: '',
      months: '',

      viewData: {
        height: 600,
        option: {
          title: {
            text: '页面访问Top200'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: []
          },
          series: [
            {
              name: '',
              type: 'bar',
              itemStyle: {
                color: '#1890FF'
              },
              data: []
            },
            {
              name: '',
              type: 'bar',
              itemStyle: {
                color: '#fac81b'
              },
              data: []
            }
          ]
        }
      },
      timesData: {
        height: 600,
        option: {
          title: {
            text: '页面访问Top200'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: []
          },
          series: [
            {
              name: '',
              type: 'bar',
              itemStyle: {
                color: '#1890FF'
              },
              data: []
            },
            {
              name: '',
              type: 'bar',
              itemStyle: {
                color: '#fac81b'
              },
              data: []
            }
          ]
        }
      }
    }
  },
  created() {
    const user = getLoginData()
    let that = this
    if (user == null) {
      that.$router.push('/user/login')
      return
    }
    that.userInfo = user
  },
  methods: {
    resize() {
      this.$refs.visitBar.resize()
    },
    getVisitPage() {
      let that = this
      let guestcode = that.userInfo.reguserno
      wx_getVisitPageApi().then((res) => {
        if (res.code == 0) {
          that.viewData.option.series.data = []
          that.viewData.option.xAxis.data = []
          let list = JSON.parse(res.data).list
          list.reverse().forEach((element) => {
            that.viewData.option.series[0].name = '访问次数'
            that.viewData.option.series[0].data.push(element.page_visit_pv)
            that.viewData.option.series[1].name = '访问人数'
            that.viewData.option.series[1].data.push(element.page_visit_uv)
            that.viewData.option.yAxis.data.push(
              commonUtil.getPageName(element.page_path)
            )
            that.timesData.option.series[0].name = '进入页次数'
            that.timesData.option.series[0].data.push(element.entrypage_pv)
            that.timesData.option.series[1].name = '退出页次数'
            that.timesData.option.series[1].data.push(element.exitpage_pv)
            that.timesData.option.yAxis.data.push(
              commonUtil.getPageName(element.page_path)
            )
          })
        }
      })
    }
  },
  mounted() {
    this.startDate = new Date()
    this.beginDate = moment(this.startDate)
      .subtract(1, 'months')
      .startOf('month')
      .format('YYYYMMDD')
    this.endDate = moment(this.startDate)
      .subtract(1, 'months')
      .endOf('month')
      .format('YYYYMMDD')
    this.months = moment().add(-1, 'month').format('M')
    this.getVisitPage()
  }
}
</script>

<style lang="sass" scoped>
.sc-card-height
  height: 250px
</style>
